<template>
  <basic-layout>
    <custom-nav-bar title="设置" />
    <div v-if="AuthStore.isLogin" class="fjm" @click="loginIn">
      <nut-avatar size="large">
        <img src="https://img.xxsoftware.top/svg/sign-in-avatar.svg" />
      </nut-avatar>
      <view class="p-5">登录</view>
    </div>
    <div v-else class="fjm">
      <nut-avatar size="large" class="m-5">
        <img :src="userInfo.avatarUrl" />
      </nut-avatar>
      <view class="p-5 b-flex-col justify-center">
        <div>用户名:{{ userInfo.userName }}</div>
      </view>
    </div>
    <view v-if="!AuthStore.isLogin" class="fjm">
      <nut-button type="primary" @tap="AuthStore.resetAuthStore()">
        <template #icon>
          <IconFont name="del"></IconFont>
        </template>
        登出
      </nut-button>
    </view>
    <nut-cell-group @tap="handleTheme">
      <nut-cell title="切换主题模式">
        <template #link>
          <nut-switch v-model="modeSwitch" />
        </template>
      </nut-cell>
    </nut-cell-group>
    <nut-cell title="切换主题色" :desc="color" @tap="handleThemeColor"></nut-cell>
    <view class="fjm">
      <nut-button type="primary" @tap="TagStore.clearTags()">
        <template #icon>
          <IconFont name="del"></IconFont>
        </template>
        重置常用支出类型
      </nut-button>
    </view>
    <view class="fjm">
      <nut-button type="primary" @tap="TagStore.clearRecords()">
        <template #icon>
          <IconFont name="del"></IconFont>
        </template>
        清除所有账目
      </nut-button>
    </view>
  </basic-layout>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';
import { useThemeStore, useTagStore, useAuthStore } from '@/store';
const AuthStore = useAuthStore();
const themeStore = useThemeStore();
const TagStore = useTagStore();
const userInfo = computed(() => AuthStore.userInfo);
const mode = ref(themeStore.getTheme);
const color = ref(themeStore.getThemeVars.primaryColor);
function loginIn() {
  Taro.navigateTo({
    url: '../log/index'
  });
}

function handleTheme() {
  if (mode.value === 'light') {
    mode.value = 'dark';
  } else {
    mode.value = 'light';
  }
  themeStore.setTheme(mode.value);
}

const modeSwitch = computed(() => mode.value === 'light');
function handleThemeColor() {
  color.value = `#${Math.random().toString(16).substr(2, 6)}`;
  themeStore.setThemeVars({ primaryColor: color.value, primaryColorEnd: color.value });
}

/** 设置页面属性 */
definePageConfig({
  navigationBarTitleText: '设置'
});
</script>
